<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>购物车</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1465328_r1wqopvojda.css">
  <link rel="stylesheet" href="./shop.css">
</head>

<body>
  <ul class="flow clear">
    <li class="active">
      <span>1.查看购物车</span>
      <i class="arrow-heave"></i>
    </li>
    <li>
      <i class="arrow-sunken"></i>
      <span>2.确认订单</span>
      <i class="arrow-heave"></i>
    </li>
    <li>
      <i class="arrow-sunken"></i>
      <span>3.提交付款</span>
      <i class="arrow-heave"></i>
    </li>
    <li>
      <i class="arrow-sunken"></i>
      <span>4.确认收货</span>
      <i class="arrow-heave"></i>
    </li>
    <li>
      <i class="arrow-sunken"></i>
      <span>5.评价</span>
    </li>
  </ul>
  <ul class="shop-title clear">
    <li class="checked-all">
      <label>
          <input type="checkbox">
          <span>全选</span>
      </label>
    </li>
    <li class="describe">店铺宝贝</li>
    <li class="score">获积分</li>
    <li class="unit-price">单价（元）</li>
    <li class="count">数量</li>
    <li class="sub-total">小计（元）</li>
    <li class="remove">操作</li>
  </ul>
  <ul class="shop-list">
    <li class="shop-item">
      <div class="shop-item-title">
        <span>店铺:</span>
        <a href="" class="store">不穿无聊的衣服</a>
        <span>卖家:</span>
        <a href="" class="seller">无聊</a>
        <a href="" class="customer">和我联系</a>
      </div>
      <div class="shop-item-info clear">
        <div class="checked">
          <input type="checkbox">
        </div>
        <div class="describe clear">
          <div class="image">
            <img src="./img/1.jpg">
          </div>
          <div class="text">
            <div class="name">
              <a href="">日韩流行风时尚美眉最爱独特小仙女小公主吊带裙</a>
            </div>
            <div class="models">
              <span>颜色:</span>
              <span class="color">米色</span>
              <span>尺码:</span>
              <span class="number">S</span>
            </div>
            <div class="serve">
              <span>保障:</span>
              <i class="iconfont icon-kuaidi2"></i>
              <i class="iconfont icon-jisutuikuan"></i>
              <i class="iconfont icon-shouhoufuwu-chapingfangyu"></i>
            </div>
          </div>
        </div>
        <div class="score">5</div>
        <div class="unit-price">100.00</div>
        <div class="count">
          <button class="sub">-</button>
          <input type="text" value="1" readonly class="count-num">
          <button class="add">+</button>
        </div>
        <div class="sub-total">0.00</div>
        <div class="remove">删除</div>
      </div>
    </li>
    <li class="shop-item">
      <div class="shop-item-title">
        <span>店铺:</span>
        <a href="" class="store">有趣的灵魂终会相遇</a>
        <span>卖家:</span>
        <a href="" class="seller">美之藤</a>
        <a href="" class="customer">和我联系</a>
      </div>
      <div class="shop-item-info clear">
        <div class="checked">
          <input type="checkbox">
        </div>
        <div class="describe clear">
          <div class="image">
            <img src="./img/2.jpg">
          </div>
          <div class="text">
            <div class="name">
              <a href="">美之藤 秋装新款女装修身休闲条纹打底针织套头衫 DMH1K03</a>
            </div>
            <div class="models">
              <span>颜色:</span>
              <span class="color">蓝色</span>
              <span>尺码:</span>
              <span class="number">M</span>
            </div>
            <div class="serve">
              <span>保障:</span>
              <i class="iconfont icon-kuaidi2"></i>
              <i class="iconfont icon-jisutuikuan"></i>
              <i class="iconfont icon-shouhoufuwu-chapingfangyu"></i>
            </div>
          </div>
        </div>
        <div class="score">10</div>
        <div class="unit-price">200.00</div>
        <div class="count">
          <button class="sub">-</button>
          <input type="text" value="1" readonly class="count-num">
          <button class="add">+</button>
        </div>
        <div class="sub-total">0.00</div>
        <div class="remove">删除</div>
      </div>
    </li>
    <li class="shop-item">
      <div class="shop-item-title">
        <span>店铺:</span>
        <a href="" class="store">腔调就是时尚和潮流</a>
        <span>卖家:</span>
        <a href="" class="seller">简非蓝</a>
        <a href="" class="customer">和我联系</a>
      </div>
      <div class="shop-item-info clear">
        <div class="checked">
          <input type="checkbox">
        </div>
        <div class="describe clear">
          <div class="image">
            <img src="./img/3.jpg">
          </div>
          <div class="text">
            <div class="name">
              <a href="">橘色大气毛呢外套上衣+高腰阔腿裤套装时尚两件套</a>
            </div>
            <div class="models">
              <span>颜色:</span>
              <span class="color">黄色</span>
              <span>尺码:</span>
              <span class="number">L</span>
            </div>
            <div class="serve">
              <span>保障:</span>
              <i class="iconfont icon-kuaidi2"></i>
              <i class="iconfont icon-jisutuikuan"></i>
              <i class="iconfont icon-shouhoufuwu-chapingfangyu"></i>
            </div>
          </div>
        </div>
        <div class="score">5</div>
        <div class="unit-price">80.00</div>
        <div class="count">
          <button class="sub">-</button>
          <input type="text" value="1" readonly class="count-num">
          <button class="add">+</button>
        </div>
        <div class="sub-total">0.00</div>
        <div class="remove">删除</div>
      </div>
    </li>
    <li class="shop-item">
      <div class="shop-item-title">
        <span>店铺:</span>
        <a href="" class="store">热爱衣服执着的girl</a>
        <span>卖家:</span>
        <a href="" class="seller">舒朗</a>
        <a href="" class="customer">和我联系</a>
      </div>
      <div class="shop-item-info clear">
        <div class="checked">
          <input type="checkbox">
        </div>
        <div class="describe clear">
          <div class="image">
            <img src="./img/4.jpg">
          </div>
          <div class="text">
            <div class="name">
              <a href="">2017春装新款时尚通勤长袖棉衬衣 职业修身条纹女衬衫</a>
            </div>
            <div class="models">
              <span>颜色:</span>
              <span class="color">蓝色</span>
              <span>尺码:</span>
              <span class="number">XL</span>
            </div>
            <div class="serve">
              <span>保障:</span>
              <i class="iconfont icon-kuaidi2"></i>
              <i class="iconfont icon-jisutuikuan"></i>
              <i class="iconfont icon-shouhoufuwu-chapingfangyu"></i>
            </div>
          </div>
        </div>
        <div class="score">8</div>
        <div class="unit-price">120.00</div>
        <div class="count">
          <button class="sub">-</button>
          <input type="text" value="1" readonly class="count-num">
          <button class="add">+</button>
        </div>
        <div class="sub-total">0.00</div>
        <div class="remove">删除</div>
      </div>
    </li>
    <li class="shop-item">
      <div class="shop-item-title">
        <span>店铺:</span>
        <a href="" class="store">威娅纪毛呢半身裙女</a>
        <span>卖家:</span>
        <a href="" class="seller">威娅</a>
        <a href="" class="customer">和我联系</a>
      </div>
      <div class="shop-item-info clear">
        <div class="checked">
          <input type="checkbox">
        </div>
        <div class="describe clear">
          <div class="image">
            <img src="./img/5.jpg">
          </div>
          <div class="text">
            <div class="name">
              <a href="">2019新款洋气气质复古加厚高腰长款a字百褶裙</a>
            </div>
            <div class="models">
              <span>颜色:</span>
              <span class="color">褐色</span>
              <span>尺码:</span>
              <span class="number">XXL</span>
            </div>
            <div class="serve">
              <span>保障:</span>
              <i class="iconfont icon-kuaidi2"></i>
              <i class="iconfont icon-jisutuikuan"></i>
              <i class="iconfont icon-shouhoufuwu-chapingfangyu"></i>
            </div>
          </div>
        </div>
        <div class="score">12</div>
        <div class="unit-price">150.00</div>
        <div class="count">
          <button class="sub">-</button>
          <input type="text" value="1" readonly class="count-num">
          <button class="add">+</button>
        </div>
        <div class="sub-total">0.00</div>
        <div class="remove">删除</div>
      </div>
    </li>
  </ul>
  <ul class="shop-account clear">
    <li class="checked-remove">
      <span class="remove">删除所选</span>
    </li>
    <li class="score-total">
      可获积分<span class="score">0</span>点
    </li>
    <li class="price-total">
      总计￥:<span class="price">0.00</span>（元/不含运费）
    </li>
    <li class="submit">
      <span class="buy">提交订单</span>
    </li>
  </ul>

  <script src="./shop.js"></script>
</body>

</html>